import * as React from 'react';
import './index.less';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import actions from '../../store/actions/Session';
import { Store, Session } from '../../types';
import NormalHeader from '../../components/NormalHeader';
const loginSrc = require('../../images/login.png');

interface Props {
    history: any,
    login: any
}

class Login extends React.Component<Props> {
    login = () => {
        let user = {
            username: (this.refs.username as any).value,
            password: (this.refs.password as any).value
        }
        this.props.login(user)
    }
    render() {
        return (
            <React.Fragment>
                <NormalHeader title='登陆' history={this.props.history} />
                <div className='login-content'>
                    <img src={loginSrc} />
                    <input type="text" placeholder='username' ref='username' />
                    <input type="text" placeholder='password' ref='password' />
                    <Link to='/Reg'>前往注册</Link>
                    <button onClick={this.login}>登陆</button>
                </div>
            </React.Fragment>
        )
    }
}

export default connect((state: Store): Session => {
    return state.Session
}, actions)(Login)